<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>uyun-show</title>

		<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../css/reveal.css">
		<link rel="stylesheet" href="../css/theme/black.css">

		<!-- Theme used for syntax highlighting of code -->
		<link rel="stylesheet" href="../lib/css/zenburn.css">
		<link rel="stylesheet" href="/node_modules/hy5b/button/btn.css">


		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? '../css/print/pdf.css' : '../css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>
	</head>
	<body>
		<div class="reveal">
			<div class="slides">
				<section>
					<h3>可视化项目简介</h3>
				
				</section>

				<section>
					<ul>
						<li>用图表在大屏展现数据</li>
						<li class="fragment">让运维人员在时间和空间的维度上感受下他们的系统</li>
						<!-- <li class="fragment">注意我们是要投到大屏上的，所以一定要大气</li> -->
					</ul>
				</section>

				<section>
					<ul>
						<li>基于Grafana，是一个功能齐全的度量仪表盘和图形编辑器

							<a target="_blank" href="http://grafana.org/">grafana</a>
							<a target="_blank" href="http://play.grafana.org/dashboard/db/big-dashboard">LiveDemo</a>
						</li>
						<li class="fragment">开源的grafana是前端基于angular，后台基于golang的项目，于是我们跟大家用的技术就不一样了。</li>
					</ul>
				</section>
				
				<section>
					<section>
						<h3>提供的功能</h3>
						<ul>
							<li class="fragment">驾驶舱管理 == Dashboard</li>
							<!-- <li class="fragment">部件布局和集成 == 用什么图表和怎么放比较好看</li> -->
						</ul>
					</section>

					<section>
						<h3>两个功能点</h3>
						<ul>
							<li>全屏</li>
							<li>截图</li>
						</ul>


					</section>

					<section>
						<h3>全屏</h3>
<button class="btn" onclick="fullscreen()">全屏</button>
<pre><code class="hljs" style="word-wrap: break-word;">var element = document.documentElement;
if (element.requestFullscreen) {
  element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
  element.msRequestFullscreen();
}
</code></pre>

						<script>
							function fullscreen() {
								var element = document.documentElement;
if (element.requestFullscreen) {
  element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
  element.msRequestFullscreen();
}

							}

						
						</script>
					</section>

					<section>
						
<h3>退出全屏</h3>	<button class="btn" onclick="exitfullscreen()">退出全屏</button>
<pre><code class="hljs" style="word-wrap: break-word;">if (document.exitFullscreen) { 
  document.exitFullscreen();
} else if (document.mozCancelFullScreen) { 
  document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) { 
  document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) { 
  document.msExitFullscreen();
}
</code></pre>
						
					
						<script>
							function exitfullscreen() {
								if (document.exitFullscreen) { 
  document.exitFullscreen();
} else if (document.mozCancelFullScreen) { 
  document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) { 
  document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) { 
  document.msExitFullscreen();
}
							}
						</script>
					</section>


<section>
						
<h3>添加监听事件</h3>		<button class="btn" onclick="applefullscreen()">全屏</button><button class="btn" onclick="appleexitfullscreen()">退出全屏</button>
<pre><code class="hljs" style="word-wrap: break-word;">$(document).bind(
'fullscreenchange webkitfullscreenchange mozfullscreenchange msfullscreenchange', function(e) {
	alert('您切换了全屏状态，并po出了一个窗口')
});
</code></pre>
						
					
						<script>
							function applefullscreen() {
								mark = 'apple';
								fullscreen();
							}
							function appleexitfullscreen() {
								mark = 'apple'
								exitfullscreen();
							}
						</script>
					</section>


					<section>
						
						<h3>截图用了一个插件</h3>

						<p><a target="_blank" href="https://github.com/niklasvh/html2canvas">html2canvas</a></p>

<pre><code class="hljs" style="word-wrap: break-word;">html2canvas(document.getElementById('stage')).then(function(canvas) {
  var imgBase64 = canvas.toDataURL();
  // document.body.appendChild(canvas);
})
</code></pre>
					</section>


				</section>

				<section>
					<section>
						<h3>提供的功能</h3>
						<ul>
							<li>驾驶舱管理 == Dashboard</li>
							<li>部件布局和集成 == 用什么图表和怎么放比较好看</li>
						</ul>
					</section>

					<section>
						<h3>部件布局</h3>

						<p>12 x 9 grid</p>
						<p><a target="_blank" href="https://show.uyuntest.cn/#/dashboard/db/7">/#/dashboard/db/7</a></p>
					</section>

					<section>
						<h3>集成方法</h3>
						<p>
							继承Chart类
						</p>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseOne">
          chart.js
        </a>
      </div>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        <pre><code class="hljs" style="word-wrap: break-word;">class Chart {
  constructor(data) {
    this.option = data
    if (data.option) {
      this.option = data.option
    }
  }
}

export default Chart


</code></pre>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseTwo">
          echarts.js
        </a>
      </div>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        <pre><code class="hljs" style="word-wrap: break-word;">import echarts from 'echarts'
import Chart from './chart'

class Echarts extends Chart {
  constructor(data, el) {
    super(data)
    this.chart = echarts.init(el)
    this.chart.setOption(this.option)

    return this.chart
  }
}

export default Echarts
</code></pre>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseThree">
          highcharts.js
        </a>
      </div>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        <pre><code class="hljs" style="word-wrap: break-word;">import highcharts from 'highcharts'

import Chart from './chart'
import HighchartsParser from './parser/highcharts'

class Highcharts extends Chart {
  constructor(data, el) {
    super(data)

    this.option = {
      ...this.option,
      chart: {
        renderTo: el,
        type: data.type
      }
    }

    this.parser = new HighchartsParser(this.option)

    this.chart = new highcharts.Chart(this.parser.data)
  }
}

export default Highcharts

</code></pre>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseFour">
          index.js
        </a>
      </div>
    </div>
    <div id="collapseFour" class="panel-collapse collapse">
      <div class="panel-body">
        <pre><code class="hljs" style="word-wrap: break-word;">import Echarts from './echarts'
import Highcharts from './highcharts'
import Globe from '../globe/globe'
import Ci from '../ci/main'
import Heatmap from '../heatmap/main'

const charts = {}

const Chart = Object.assign({
  create(data, elem) {
    let ChartConstructor = charts[data.class || 'echarts']

    if (ChartConstructor) {
      return new ChartConstructor(data, elem)
    }
  },

  register(name, cons) {
    charts[name] = cons
  }
})

Chart.register('echarts', Echarts)
Chart.register('highcharts', Highcharts)
Chart.register('globe', Globe)
Chart.register('ci', Ci)
Chart.register('heatmap', Heatmap)

export default Chart

</code></pre>
      </div>
    </div>
  </div>
</div>



						<p class="fragment">于是我们有了这样一种开发组件的套路</p>
						<!-- <p>优化: 需要用到懒加载</p> -->
					</section>

					<section>
						<h3>组件</h3>

						<ul>
							<li class="fragment">svg，基于标签的绘图方式
								<p> <a href="http://10.1.200.19:8080/show/ci/" target="_blank">基于d3的CI关系图</a></p>
							</li>
							<li class="fragment">canvas，二维图形，提供给三维的贴图
								<p> <a href="http://10.1.200.19:8080/show/heatmap/" target="_blank">echart提供的heatmap</a></p>
							</li>
							<li class="fragment">webgl，三维场景 <span class="hide">3个组件：场景（scene）、相机（camera）和渲染器（renderer）</span>
								<p> <a href="http://10.1.200.19:8080/show/globe/" target="_blank">echart-x提供的webgl</a></p>
							</li>
						</ul>
					</section>
				</section>

				<section>
					<h3>
						总结
					</h3>
					<p>一期开发内容比较简单，简单介绍了下SHOW项目的大致情况<span class="hide">以后可能会讲组件的一些技术，比如webgl图形相关的</span></p>
				</section>

				<section>
					<h3>谢谢</h3>
				</section>
			</div>
		</div>

		<script src="../lib/js/head.min.js"></script>
		<script src="../js/reveal.js"></script>
		<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
		<script src="/node_modules/hy5b/jsonview/index.js"></script>
		<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
		<script>

			var mark = '';
			// More info https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				history: true,

				// More info https://github.com/hakimel/reveal.js#dependencies
				dependencies: [
					{ src: '../plugin/markdown/marked.js' },
					{ src: '../plugin/markdown/markdown.js' },
					{ src: '../plugin/notes/notes.js', async: true },
					{ src: '../plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
				]
			});

$(document).bind(
'fullscreenchange webkitfullscreenchange mozfullscreenchange msfullscreenchange', function(e) {
	if (mark === 'apple') {
	alert('您切换了全屏状态，并po出了一个窗口');
		mark = '';
	}
});
		</script>
	</body>
</html>
